{% extends "memory_base.html" %}
{% load i18n %}
{% block head %}
    <title>{% trans "欢迎来到忆存" %}</title>
    {{ block.super }}
    <style>
    *{
        font-family: "Microsoft YaHei", Arial, "Segoe UI", sans-serif;
    }
    body{
        background-image: url("{{ STATIC_URL }}memoryImage/background/bigbg1.png");
    }

    .login-area{
        width: 20%;
        margin: 180px auto;
        height: 320px;
        background-color: white;
        background-image: url("{{ STATIC_URL }}memoryImage/background/login2.jpg");
        padding: 10px;
        color: black;
        border-radius: 10px;

        display: none;

    }
    .login-top{
        height: 100px;
    }

    p{
        font-size: 20px;
    }
    p{
        display: none;
    }
    </style>
{% endblock %}

{% block nav %}
<nav class="bk-horz-nav11">
    <div class="bk-nav-logo fl">
        <img src="https://magicbox.bk.tencent.com/static_api/v3/bk/images/logo1.png">
        {% trans '忆存' %}
    </div>
    <ul class="bk-nav-links fr">
{#        <li class="bk-has-submenu">#}
{#            <a href="javascript:void(0)">#}
{#                <span>{% trans "语⾔" %}</span>#}
{#            </a>#}
{#            <ul class="bk-submenu">#}
{#                <li>#}
{#                    <a href="javascript:">#}
{#                        简体中⽂#}
{#                    </a>#}
{#                </li>#}
{#                <li>#}
{#                    <a href="javascript:">#}
{#                        English#}
{#                    </a>#}
{#                </li>#}
{#            </ul>#}
{#        </li>#}
    </ul>
</nav>
{% endblock %}


{% block content %}
    <div class="display-area" style="text-align: center; margin-top: 110PX; display: none">
        <P class="p p1">时过境迁...</P>
        <p class="p p2">往昔的碎片随风而逝</p>
        <p class="p p3">望你能在这喧闹纷纷的世间，留下这一处回忆</p>
        <p class="p p4"><b>以待回首</b></p>
        <button id="begin" class="mybutton1" style="margin-top: 20px;display: none">
            开始我的忆存
        </button>
    </div>


    <div class="login-area">
        <div class="login-top">
            <img src="{{ STATIC_URL }}memoryImage/background/bg1.png" style="height: 80px;margin-left: 110px;">
        </div>

        <form id="validate_form">
            <div id="validate_form" class="bk-form login-form">
                <div class="bk-form-item is-required form-group" style="width: 280px;margin-left: 20px;">
                    <label class="control-label" for="username">用户昵称</label>
                    <input type="text" class="bk-form-input form-control" id="username" name="username" placeholder="用户昵称">
                </div>

                <div class="bk-form-item is-required form-group" style="width: 280px;margin-left: 20px;">
                    <label class="control-label" for="password">密码</label>
                    <input type="password" class="bk-form-input form-control" id="password" name="username" placeholder="密码">
                </div>
            </div>
            <div style="text-align: center">
                <button id="login" type="button" class="mybutton2" style="width: 80px;">登录</button>
                <button id="register-button" type="button" class="mybutton2" style="width: 80px;">注册</button>
            </div>
        </form>
    </div>

{% endblock %}

{% block extra_block %}
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/validate-1.14.0/js/jquery.validate.js"></script>

<script>






    /**
     * 设置js动作
     */
    $(function () {
        $(".display-area").show();
        $(".p1").show(1500);
        $(".p2").show(3500);
        $(".p3").show(4500);
        $(".p4").show(5500);
        $("#begin").fadeIn(6500)
    });

    $('#begin').click(function () {
        $(".display-area").hide();
        $(".login-area").fadeIn(200);
        $("body").css('background-image','url("{{ STATIC_URL }}memoryImage/background/bigbg1-ocpity.png")')
    });

    /**
     * 校验合法
     */
    $('#validate_form').validate({
        ignore: '.ignore',
        errorElement: 'div', //错误信息的容器
        errorClass: 'is-danger',
        errorPlacement: function (error, element) {
            error.addClass('bk-form-tip').insertAfter(element)
        },
        validClass: "bk-valid",
        //验证规则
        rules: {
            username: {
                required: true,
            },
            password: {
                required: true,
            }
        },
        //错误提示信息
        messages: {
            username: "",
            password: "",
         }
    });


    $("#login").click(function() {
        /**
         *用户使用username登录，但是传参过程中一直采用user_id
         */

        var username = $("#username").val();
        var password = $("#password").val();

        {#if ( username === "" ){#}
        {#    new bkMessage({#}
        {#        message: "请输入用户昵称",#}
        {#        theme: 'error'#}
        {#    });#}
        {#    return false#}
        {# }else if ( password === "" ) {#}
        {#   new bkMessage({#}
        {#        message: "请输入密码",#}
        {#        theme: 'error'#}
        {#    });#}
        {#   return false#}
        {# } #}
        if ( password === "" ) {
           new bkMessage({
                message: "请输入密码",
                theme: 'error'
            });
           return false
         }

        if( $('#validate_form').valid() ){
            $.ajax({
            type:"POST",
            url:"{{ SITE_URL }}memory_storage/login/",
            data:{
                'username': username,
                'password': password,
                'csrfmiddlewaretoken': "{{ csrf_token }}"
            },
            dataType:"JSON",
            success: function(response){
                if ( response['result'] ){
                        new bkMessage({
                        message: response['message'],
                        theme: 'success'
                    });
                    window.location.href = "{{ SITE_URL }}memory_storage/main?user_id=" + response['user_id'];
                }else{
                    new bkMessage({
                        message: response['message'],
                        theme: 'error',
                        delay: 3000
                    });
                }
            },
            error: function() {
                alert("获取数据错误!");
            }
        })
        }




    });

    $('#register-button').click(function () {
        window.location.href = "{{ SITE_URL }}memory_storage/register";
    });


</script>
{% endblock %}

{% block footer %}{% endblock %}

